<template>
    <div>
        <!--面包屑导航-->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path:'/rolelist'}">权限管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path:'/rolelist'}">角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button type="primary" class="increment" @click.stop="incrementRoleWin">添加角色</el-button>
        <!--角色列表-->
        <el-table
                :data="roleListsData"
                style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="scope">

                    <el-row v-for="item1 in scope.row.children">
                        <!--第一级-->
                        <el-col :span="6">
                            <el-tag
                                    closable
                                    type="success">
                                {{item1.authName}}
                            </el-tag>
                        </el-col>
                        <el-col :span="18">
                            <!--二级列表-->
                            <el-row v-for="item2 in item1.children">
                                <el-col :span="6">
                                    <el-tag
                                            closable
                                            type="success">
                                        {{item2.authName}}
                                    </el-tag>
                                </el-col>
                                <el-col :span="18">
                                    <!--删除权限-->
                                    <el-tag v-for="(item3,index3 ) in item2.children"
                                            closable
                                            @close="handleClose(item2,index3,scope.row.id,item3.id)"
                                            type="error">
                                        {{item3.authName}}
                                    </el-tag>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </template>
            </el-table-column>

            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    label="角色名称"
                    prop="roleName">
            </el-table-column>
            <el-table-column
                    label="角色描述"
                    prop="roleDesc">
            </el-table-column>
            <el-table-column
                    label="操作"
                    prop=""
            >
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit"  @click="editRoleWin(scope)"  circle></el-button>
                    <el-button type="success" icon="el-icon-check" @click.stop="showRightListwin(scope)" circle></el-button>
                    <el-button type="danger" icon="el-icon-delete" @click.stop="decrementRole(scope)" circle></el-button>
                </template>

            </el-table-column>
        </el-table>

        <!--角色所有权限列表弹窗-->
        <el-dialog
                title="角色权限列表"
                :center="!showRightList"
                :visible.sync="showRightList"
                width="30%"
        >
            <el-tree
                    :data="rightListData"
                    ref="tree"
                    show-checkbox
                    node-key="id"
                    default-expand-all
                    @check="cc"
                    :default-checked-keys="rightArr"
                    :props="rightListProps">
            </el-tree>
        <span slot="footer" class="dialog-footer">
            <el-button @click="showRightList = false">取 消</el-button>
            <el-button type="primary" @click="editRightPost">确 定</el-button>
        </span>
        </el-dialog>

        <!--添加角色弹窗-->
        <el-dialog title="添加角色" :visible.sync="incrementRoleShow">
            <el-form :model="newRoleData" :rules="rules" label-width="100px">
                <el-form-item label="角色名称"  prop="roleName">
                    <el-input v-model="newRoleData.roleName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色描述"  prop="roleDesc">
                    <el-input v-model="newRoleData.roleDesc" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="incrementRoleShow = false">取 消</el-button>
                <el-button type="primary" @click="incrementRole">确 定</el-button>
            </div>
        </el-dialog>

        <!--编辑角色描述弹窗-->
        <el-dialog title="编辑角色" :visible.sync="editRoleShow" @close="quxiaoEditRole">
            <el-form :model="editRoleData" :rules="rules" label-width="100px">
                <el-form-item label="角色id"  prop="roleName">
                    <el-input v-model="editRoleData.id" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色名称"  prop="roleName">
                    <el-input v-model="editRoleData.roleName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色描述"  prop="roleDesc">
                    <el-input v-model="editRoleData.roleDesc" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="quxiaoEditRole">取 消</el-button>
                <el-button type="primary" @click="editRolePost">确 定</el-button>
            </div>
        </el-dialog>


    </div>

</template>

<script>
    export default {
        name: "rolelist",
        data() {
            return {
                incrementRoleShow:false,//显示添加角色弹窗
                newRoleData:{//添加新角色信息
                  roleName:"",
                  roleDesc:""
                },
                editRoleShow:false,//编辑角色弹窗显示与隐藏
                editRoleData:{//编辑新角色信息
                    roleName:"",
                    roleDesc:""
                },
                rules: {//表单验证
                    roleName:[
                        { required: true, message: '请输入角色名称', trigger: 'blur' },

                    ],
                    roleDesc:[
                        { required: true,min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                    ]
                },
                showRightList:false,//显示权限列表弹窗
                rightListData: [],//所有权限列表，树状结构
                rightListProps: {
                    children: 'children',
                    label: 'authName'  //权限列表关联显示的内容
                },
                rightArr:[],//当前拥有的权限
                roleListsData: [],//角色当前拥有的权限列表
                roleId:'' //当前角色id
            }
        },
        methods: {
            cc(){
                console.log('hhhhhhhh')
            },
            //显示添加角色弹窗
            incrementRoleWin(){
                this.incrementRoleShow=true;
            },
            //添加新角色
            incrementRole(){
                //将新角色信息请求接口传送
                let {roleName,roleDesc}=this;
                this.$myhttp({
                    url:'roles',
                    method:'post',
                    data:{roleName:this.newRoleData.roleName,roleDesc:this.newRoleData.roleDesc}
                }).then((respon)=>{
                    let {data,meta}=respon.data;
                    if(meta.status===201){
                        this.getRoleLists();//添加新用户后重新获取角色列表信息
                        console.log('接口请求成功',roleDesc,roleName,respon)
                    }

                });

                //关闭添加角色的弹窗
                this.incrementRoleShow = false;
            },
            //删除角色
            decrementRole(scope){

                //删除前进行误触确认
                this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$myhttp({
                        url:`roles/${scope.row.id}`,
                        method:'delete'
                    }).then((respon)=>{
                        let {data,meta}=respon.data;
                        if(meta.status===200){
                            this.getRoleLists();//删除角色后重新获取一下角色数据
                            this.$message({
                                type:'success',
                                message:"删除角色成功"
                            })
                        }
                    })


                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });


            },
            //编辑角色名称、描述弹窗显示
            editRoleWin(scope){
                this.editRoleShow=true;

                this.editRoleData=scope.row
            },
            //取消编辑角色名称、描述
            quxiaoEditRole(){
                this.getRoleLists();//重新加载角色信息
                this.editRoleShow=false;
            },
            //编辑角色描述，请求接口
            editRolePost(){
                this.$myhttp({
                    url:`roles/${this.editRoleData.id}`,
                    method:'put',
                    data:{roleName:this.editRoleData.roleName,roleDesc:this.editRoleData.roleDesc,}
                }).then((respon)=>{
                    let {data,meta}=respon.data;
                    if(meta.status===200){
                        this.$message({
                            type:'success',
                            message:'编辑角色信息成功'
                        })
                    }
                });

                this.editRoleShow=false;
            },
            //打开权限列表窗口，获取角色所拥有现有的权限
            showRightListwin(scope){
                //获得权限列表树状结构，请求接口
                this.$myhttp({
                    url:"rights/tree",
                    method:'get'
                }).then((respon)=>{
                    let {data,meta}=respon.data;
                    if(meta.status===200){
                        this.rightListData=data;//将树状权限列表赋值，所有权限
                        console.log(data,'打印所有权限列表')

                    }
                });
                //通过scope获取每个角色拥有的现有权限
                console.log(scope,'当前角色scope的信息');
                this.rightArr=[];
               var arr= scope.row;//点击每个角色就将每个角色通过scope传入该角色信息：如主管的权限信息,id等
                //多级遍历，将权限信息组成数组。rightArr用来显示已经拥有的权限。将与node-key 配合id唯一性
                arr.children.forEach((item1)=>{
                    item1.children.forEach((item2)=>{
                        item2.children.forEach((item3)=>{
                            this.rightArr.push(item3.id)
                        })
                    })
                });
                //获取当前角色id
                this.roleId=scope.row.id;
                //打开窗口
                this.showRightList=true;
            },
            //编辑当前用户的权限，增加或者减少
          editRightPost(){
              var  a=  this.$refs.tree.getCheckedKeys();//选中权限的id
              var  b=  this.$refs.tree.getHalfCheckedKeys();//半选中权限的id
               var rights= a.join(',')+','+b.join(',');
               console.log(rights,'修改角色权限成功');
               this.$myhttp({
                   url:`roles/${this.roleId}/rights`,
                   method:'post',
                   data:{rids:rights}
               }).then((respon)=>{
                    let {data,meta}=respon.data;
                    if(meta.status===200){
                        //权限更新，增加或者减少。需要重新获取一遍所有角色信息
                        this.getRoleLists();
                        this.$message({
                            type:'success',
                            message:meta.msg
                        })
                    }
               });
                this.showRightList = false
            },
            //获取角色信息列表,展示所有角色
            getRoleLists() {
                this.$myhttp({
                    url: "roles",
                    method: 'get'
                }).then((respon) => {
                    let {data, meta} = respon.data;
                    console.log(respon,'获取所有角色的信息');
                    this.roleListsData = data;
                })
            },
            //删除指定权限
            handleClose(item2, index3, roleId, rightId) {
                this.$myhttp({
                    url: `roles/${roleId}/rights/${rightId}`,
                    method: 'delete'
                }).then((respon) => {
                    let {data, meta} = respon.data;
                    if (meta.status === 200) {
                        console.log(data, meta);
                        this.$message({type: 'success', message: meta.msg});
                        //删除roleListData
                        item2.children.splice(index3, 1);
                        //重新获取角色列表，这个方法也可以但是会因为刷新的原因，折叠格会折叠起来，需要重新打开
                        //this.getRoleLists();
                    }

                });

            },

        },
        mounted() {
            this.getRoleLists();//挂载时候获取角色列表
        }
    }
</script>

<style scope>
    .el-breadcrumb {
         font-size: 14px;
         line-height: 36px ;
    }
    .demo-table-expand {
        font-size: 0;
    }
    /*添加角色按钮*/
    .increment{
        float:left;
        margin-bottom:10px;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .el-table td, .el-table th {
        text-align: left !important;
    }

    .el-tag {
        margin-right: 10px;
    }

</style>
